import Color from '../js/utils/color.js';
import { UIPanel, UIRow, UIInput, UIHorizontalRule, UIButton, UIColor, UICheckbox, UIInteger, UITextArea, UIText, UINumber } from './lib/ui.js';

function SidebarProps(editor) {

    var strings = editor.strings;

    var signals = editor.signals;

    var container = new UIPanel();
    container.setBorderTop('0');
    container.setPaddingTop('20px');
    container.setDisplay('none');


    var objectTypeRow = new UIRow();
    var objectType = new UIText('矩形');

    objectTypeRow.add(new UIText(strings.getKey('sidebar/object/type')).setWidth('90px'));
    objectTypeRow.add(objectType);

    container.add(objectTypeRow);

    // name

    var objectNameRow = new UIRow();
    var objectName = new UIInput('rect').setWidth('80px').setFontSize('12px')

    objectNameRow.add(new UIText(strings.getKey('sidebar/object/name')).setWidth('90px'));
    objectNameRow.add(objectName);

    container.add(objectNameRow);


    var hr = new UIHorizontalRule();
    container.add(hr);

    // position
    var objectPositionRow = new UIRow();
    var objectPositionX = new UINumber().setPrecision(3).setWidth('50px').onChange(updateObject);
    var objectPositionY = new UINumber().setPrecision(3).setWidth('50px').onChange(updateObject);

    objectPositionRow.add(new UIText('X').setWidth('20px').setFontSize('12px'));
    objectPositionRow.add(objectPositionX);
    objectPositionRow.add(new UIText('Y').setWidth('20px').setFontSize('12px'));
    objectPositionRow.add(objectPositionY);

    container.add(objectPositionRow);


    // size
    var objectSizeRow = new UIRow();
    var objectSizeW = new UINumber().setPrecision(3).setWidth('50px').onChange(updateObject);
    var objectSizeH = new UINumber().setPrecision(3).setWidth('50px').onChange(updateObject);

    objectSizeRow.add(new UIText('W').setWidth('20px').setFontSize('12px'));
    objectSizeRow.add(objectSizeW);
    objectSizeRow.add(new UIText('H').setWidth('20px').setFontSize('12px'));
    objectSizeRow.add(objectSizeH);

    container.add(objectSizeRow);


    // rotation

    var objectRotationRow = new UIRow();
    var objectRotation = new UINumber().setStep(10).setNudge(0.1).setUnit('°').setWidth('50px');

    objectRotationRow.add(new UIText('R').setWidth('20px').setFontSize('12px'));
    objectRotationRow.add(objectRotation);

    container.add(objectRotationRow);



    var hr = new UIHorizontalRule();
    container.add(hr);



    // fill
    var objectFillRow = new UIRow();
    var objectFill = new UIColor().setValue('#AAAAAA').onInput(updateObject);

    objectFillRow.add(new UIText('fill').setWidth('90px').setFontSize('12px'));
    objectFillRow.add(objectFill);

    container.add(objectFillRow);


    // stroke
    var objectStrokeRow = new UIRow();
    var objectStroke = new UIColor().setValue('#AAAAAA').onInput(updateObject);

    objectStrokeRow.add(new UIText('stroke').setWidth('90px').setFontSize('12px'));
    objectStrokeRow.add(objectStroke);

    container.add(objectStrokeRow);



    // strokeWidth
    var objectStrokeWRow = new UIRow();
    var objectSizeStrokeWidth = new UINumber().setPrecision(2).setWidth('40px').onChange(updateObject);

    objectStrokeWRow.add(new UIText('strokeWidth').setWidth('90px').setFontSize('12px'));
    objectStrokeWRow.add(objectSizeStrokeWidth);

    container.add(objectStrokeWRow);

    // events
    signals.objectSelected.add(function (object) {

        if (object !== null) {

            container.setDisplay('block');

            // updateRows( object );
            updateUI( object );

        } else {

            container.setDisplay('none');

        }

    });

    signals.objectChanged.add(function (object) {

        if (object !== editor.layers._sel) return;

        updateUI(object);

    });

    function updateObject() {
        let x = objectPositionX.getValue();
        let y = objectPositionY.getValue();
        let w = objectSizeW.getValue();
        let h = objectSizeH.getValue();

        let fill = objectFill.getValue();
        let stroke = objectStroke.getValue();
        let sw = objectSizeStrokeWidth.getValue();

        let selected = editor.layers.getSelectedElement();

        if (selected != null) {

            selected.setup(x, y, w, h);
            selected.fill = fill;
            selected.stroke = stroke;
            selected.lineWidth = sw;
        }
    }

    function updateUI(object) {
        objectPositionX.setValue(object.x);
        objectPositionY.setValue(object.y);
        objectSizeW.setValue(object.width);
        objectSizeH.setValue(object.height);
        objectSizeStrokeWidth.setValue(object.lineWidth);
        
        let fill = Color.parse(object.fill).toHex();
        let stroke = Color.parse(object.stroke).toHex();

        objectFill.setValue(fill);
        objectStroke.setValue(stroke);
    }

    return container;

}

export { SidebarProps };
